<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-二倍图处理</title>
  <style>
    /* 需求：需要讲一个50*50像素(css像素)的图片 直接放入我们的iphone8 里面会放大2倍 100*100 就会存在模糊 */

    /* 思路：我们可以先准备一张100*100的图片 然后将它缩放至50*50 这时我们在放到iphone手机中 它给我放大一倍后就是我们原来的大小了 这种情况我们称之为两倍图 */
    
    img:nth-child(2) {
      /* 原始图片100*100 */
      width: 50px;
      height: 50px;
    }

    
  </style>
</head>
<body>
  
  <img src="images/50_50.png" alt="">
  <img src="images/100_100.png" alt="">

</body>
</html>